<template>
  <div class="customize-detail">
    <div class="customize-detail-content">
      <div class="customize-detail-title mb16 customize-detail-bd">硬件非标定制项</div>
      <div class="customize-detail-text-area">
        <label for="" class="customize-detail-label customize-detail-select">
          <span class="customize-detail-bd">硬件非标类型</span>
          <el-select v-model="hardParams.hardwareNonStandardId" placeholder="请选择" clearable v-if="isEditHard">
            <el-option v-for="item in getDict('hardware')" :key="item.name" :label="item.name" :value="item.id" />
          </el-select>
          <span v-else>{{ getDictItem("hardware", hardParams.hardwareNonStandardId) }}</span>
        </label>
        <label for="" class="customize-detail-label mt20">
          <span class="customize-detail-bd">定制周期（日）</span>
          <el-input-number
            v-model="hardParams.hardwareCycle"
            placeholder="请填写"
            :controls="false"
            :disabled="!isEditHard"
          ></el-input-number>
        </label>
        <label for="" class="customize-detail-label mt20">
          <span class="customize-detail-bd">定制内容</span>
          <el-input
            type="textarea"
            placeholder="请填写"
            v-model="hardParams.hardwareContent"
            :disabled="!isEditHard"
            :rows="4"
            :autosize="true"
          ></el-input>
        </label>
        <div class="customize-detail-btn">
          <el-button type="text" v-if="isEditHard" @click="hardCancel">取消</el-button>
          <el-button type="text" v-if="isEditHard" @click="hardSave">保存</el-button>
          <el-button type="text" v-if="!isEditHard && BUTTONS['update']" @click="hardEdit">编辑</el-button>
        </div>
      </div>
    </div>
    <div class="customize-detail-content mt20">
      <div class="customize-detail-title mb16 customize-detail-bd">软件非标定制项</div>
      <div class="customize-detail-text-area">
        <label for="" class="customize-detail-label customize-detail-select">
          <span class="customize-detail-bd">软件非标类型</span>
          <el-select v-model="softParams.softwareNonStandardId" placeholder="请选择" clearable v-if="isEditSoft">
            <el-option v-for="item in getDict('software')" :key="item.name" :label="item.name" :value="item.id" />
          </el-select>
          <span v-else style="color: #999999">{{ getDictItem("software", softParams.softwareNonStandardId) }}</span>
        </label>
        <label for="" class="customize-detail-label mt20">
          <span class="customize-detail-bd">定制周期（日）</span>
          <el-input-number
            v-model="softParams.softwareCycle"
            placeholder="请填写"
            :controls="false"
            :disabled="!isEditSoft"
          ></el-input-number>
        </label>
        <label for="" class="customize-detail-label mt20">
          <span class="customize-detail-bd">定制内容</span>
          <el-input
            type="textarea"
            placeholder="请填写"
            v-model="softParams.softwareContent"
            :disabled="!isEditSoft"
            :rows="4"
            :autosize="true"
          ></el-input>
        </label>
        <div class="customize-detail-btn">
          <el-button type="text" v-if="isEditSoft" @click="softCancel">取消</el-button>
          <el-button type="text" v-if="isEditSoft" @click="softSave">保存</el-button>
          <el-button type="text" v-if="!isEditSoft && BUTTONS['update']" @click="softEdit">编辑</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, inject } from "vue";
import { ElMessage } from "element-plus";
import { useDict } from "@/hooks/useDict";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { updateProjectHardware, updateProjectSoftware } from "@/api/modules/project"; //   updateProjectSoftware,
const { BUTTONS } = useAuthButtons("orderCustomize");
const { getDict, getDictItem } = useDict(["hardware", "software"]);
const refresh = inject<any>("refresh");
const { orderDetail, projectId } = defineProps({
  orderDetail: {
    type: Object,
    default: () => {}
  },
  projectId: {
    type: String,
    default: ""
  }
});
const hardParams = ref<any>({
  id: projectId,
  hardwareCycle: orderDetail?.project.hardwareCycle,
  hardwareContent: orderDetail?.project.hardwareContent,
  hardwareNonStandardId: orderDetail?.project.hardwareNonStandardId
});
const isEditHard = ref(false);
const hardEdit = () => {
  isEditHard.value = !isEditHard.value;
};
const hardSave = async () => {
  await updateProjectHardware(hardParams.value);
  refresh();
  ElMessage.success("保存成功");
};
const hardCancel = () => {
  isEditHard.value = !isEditHard.value;
  hardParams.value = {
    hardwareCycle: orderDetail?.project.hardwareCycle,
    hardwareContent: orderDetail?.project.hardwareContent,
    hardwareNonStandardId: orderDetail?.project.hardwareNonStandardId
  };
};

/**软件 */

const softParams = ref<any>({
  id: projectId,
  softwareCycle: orderDetail?.project.softwareCycle,
  softwareContent: orderDetail?.project.softwareContent,
  softwareNonStandardId: orderDetail?.project.softwareNonStandardId
});
const isEditSoft = ref(false);
const softEdit = () => {
  isEditSoft.value = !isEditSoft.value;
};
const softSave = async () => {
  await updateProjectSoftware(softParams.value);
  refresh();
  ElMessage.success("保存成功");
};
const softCancel = () => {
  isEditSoft.value = !isEditSoft.value;
  softParams.value = {
    softwareCycle: orderDetail?.project.softwareCycle,
    softwareContent: orderDetail?.project.softwareContent,
    softwareNonStandardId: orderDetail?.project.softwareNonStandardId
  };
};
</script>
<style scoped lang="scss">
.customize-detail {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  &-title {
    font-size: 14px;
    color: #666666;
  }
  &-text-area {
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
    background: #f5f7fa;
    position: relative;
  }
  &-label {
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
  }
  &-select {
    width: 120px;
  }
  &-btn {
    position: absolute;
    right: 14px;
    top: 10px;
  }
  &-bd {
    font-weight: bold;
  }
  :deep(.el-input-number),
  :deep(.el-input),
  :deep(.el-textarea) {
    .el-input__wrapper {
      cursor: default;
      background: #f5f7fa;
      box-shadow: none;
      .el-input__inner {
        width: 100%;
        cursor: default;
        text-align: left;
        color: #999 !important;
      }
    }
    .el-textarea__inner {
      cursor: default;
      resize: none;
      background: #f5f7fa;
      box-shadow: none;
      color: #999 !important;
    }
  }
  :deep(.el-select__wrapper) {
    width: 150px;
    font-size: 14px;
    cursor: auto;
    background: none;
    border: 0;
    box-shadow: none;
    .el-select__suffix {
      //   display: none;
    }
    .el-select__selected-item {
      //   color: #666666 !important;
    }
  }
  ::v-deep .el-input-number.is-disabled .el-input__inner {
    -webkit-text-fill-color: #999 !important;
  }
}
</style>
